THE CONCORDANCE KIT 01 · music → chimes → montage
=================================================

A small band that plays songs written as text, and seven CHIMES boards that
listen to any song and move with it. Everything runs in your own browser,
from these files. Nothing is uploaded, nothing is installed.

Best in Chrome or Edge on a computer.


WHAT'S INSIDE
-------------

  MODEL B-1 - the band.html
      Plays a song written as a "sheet" (a small text file). Renders it to a WAV or M4A.
      No sheet? Press ✎ SONG BUILDER: pick a style, a key, the chords and the parts,
      and the band writes the song for you.

  songs for the band/
      Insert Coin.band.json     80s pop, an arcade at closing time (the Arcade's own song)
      Night Drive.band.json     synthwave, Am F C G
      Closes Truly.band.json    a round that closes on itself

  CHIMES/
      the Arcade - hears any song.html          neon after closing (dark)
      Memphis 85 - hears any song.html          squiggles on cream (light)
      the Observatory - hears any song.html     a night on the roof (dark)
      Euclid by Day - hears any song.html       rhythm as geometry (light)
      the First Board - hears any song.html     where it began: fans, wheels, bars (dark)
      Ink and Paper - hears any song.html       drawn by hand, in code (light)
      the Reef - hears any song.html            coral and current (dark)

  LAB (experimental)/
      THE LINE EDITOR - experimental.html       write a song as a grid; opens with Takatum loaded;
                                                saves a folio, or the loop as a WAV or M4A
      Ink and Paper - plays a folio (Takatum loaded).html
                                                a board that reads a folio and plays it
      Takatum.music.json                        a folio, made in the line editor


FIVE STEPS
----------

  1. Open "MODEL B-1 - the band.html". Press LOAD and choose
     "songs for the band/Insert Coin.band.json". Press PLAY to hear it.

  2. Press WAV. The band renders the whole song, note by note, into a
     .wav in your Downloads. Click once and wait: long songs take a moment.

  3. Open "CHIMES/the Arcade - hears any song.html". Press LOAD SONG and
     choose that WAV (or any mp3, m4a, wav or mp4 of your own).
     The board listens first and finds the beats.

  4. Press PLAY and watch. You can drag a row or a column of tiles with the
     mouse, like a puzzle cube, and the little machines answer.
     Press TAKE to record the whole song, board and sound, to your
     Downloads, with half a second of silence at each end.
     REC records by hand: press it again to stop.

  5. Record the same song on two or three boards. Because every take comes
     from the same song, they line up in your video editor, and you can
     cut, mask and layer them. That part is the montage.


WRITING YOUR OWN SONG FOR THE BAND
----------------------------------

A sheet is JSON. Open one of the songs in a text editor to see a real one.

  {
    "kind": "BAND FOLIO",
    "title": "My Song",
    "tempo": 100,
    "meter": 4,
    "patterns": {
      "beat": {
        "kick":  { "inst": "linn kick",   "seq": "x...x...x...x..." },
        "snare": { "inst": "gated snare", "seq": "....x.......x...", "fx": ["reverb"] }
      },
      "pads": {
        "pad": { "inst": "PWM pad ♪", "seq": "Am@3 -*15 | F@3 -*15", "fx": ["pump", "reverb"] }
      }
    },
    "song": [
      { "name": "intro", "bars": 4, "play": ["pads"] },
      { "name": "verse", "bars": 8, "play": ["pads", "beat"] }
    ]
  }

- A pattern is a group of lanes. Each lane is one instrument and one sequence.
- The song is a list of sections. Each plays some patterns for a number of bars.
  A pattern loops to fill its section.
- One token = one sixteenth note. In 4/4, 16 tokens make a bar.

    .          rest
    -          hold the note before for one more sixteenth
    x  X       a hit (X is accented)
    A3 C#4 Bb2 a note (A4 = 440 Hz)
    Am F Cmaj7 Dm7 Esus4 G5    a chord (at the lane's "oct", default 3)
    F@4        a chord at a chosen octave
    A3+C4+E4   notes stacked by hand
    tok! tok?  accent / ghost
    tok*N      repeat, e.g. -*15 or .*63
    |          a bar line for your eyes only

- Lane options: "vol" 0-2 · "pan" -1..1 · "oct" · "fx": reverb, big reverb,
  delay, chorus, wide, drive, lofi, bright, pump (ducks under every kick).
- Click any voice on the band's shelf to hear it. Voices marked ♪ take notes.
- READ THE SHEET shows mistakes in words, under the sheet.
- A band sheet isn't a folio (see the LAB below). To put one of the band's
  songs on a board, render it to a WAV and let the board hear it.


THE LAB: CHIMES AND FOLIOS (EXPERIMENTAL)
-----------------------------------------

This part has only just started. It's a lab, and it's here for fun, for
anyone curious about what a browser can do with music. Nothing in it is
finished. Try things, break things, see what happens.

A folio is a song written as a grid instead of recorded: each line is one
instrument, and the steps you light are when it plays. It's saved as a small
text file (.music.json). A board that reads a folio doesn't listen for the
beats, it already knows every note: each note moves one line of tiles at
the moment the board plays it.

  1. Open "LAB (experimental)/THE LINE EDITOR - experimental.html" and
     press Play. That's Takatum: 25 lines, 107 BPM, four bars.

  2. Change something: light a step (click a lit step on a ♪ line to move
     its note up), move the tempo, add a line, stack an effect. Name it and
     press SAVE FOLIO. A .music.json lands in your Downloads.

  3. Open "LAB (experimental)/Ink and Paper - plays a folio (Takatum
     loaded).html", press LOAD FOLIO, choose your file, press Play.
     TAKE records it, 1 to 4 loops, board and its own sound.

  What goes in, what comes out:
    the band               a band sheet        → a WAV or M4A
    a board that hears     any song            → a take (board + your song)
    the line editor        clicks, or a folio  → a folio, or the chart as text
    a board with a folio   a folio             → a take (board + its own sound)

  Two kinds of sound:
    - from a music file: a board that hears plays your song as it is, and
      has to listen first to find its beats.
    - built in the browser: the band, the line editor and the folio board
      make every sound live (Web Audio: oscillators and noise). The song is
      only text until something plays it.

  Where it stands for now: only Ink and Paper reads folios so far. It plays
  the notes but leaves out the editor's volumes, pans and effects, and it
  knows the editor's first 57 sounds (the 37 band voices at the end of the
  list play in the editor only, for now).


UNDER THE HOOD, FILE BY FILE
----------------------------

No GIFs, no SVG, no image files, no libraries. Everything you see is drawn
by code on an HTML <canvas>, fresh on every frame, and every sound is built
by the browser's own audio engine. Nothing is fetched from the internet.

  A CHIMES board (one HTML file, 102 to 110 KB)
    - The picture: the Canvas 2D API. 9 x 9 tiles; each tile is a small
      function that draws its machine from a few numbers (an angle, a level,
      a phase) with lines, arcs, gradients and text, redrawn on every frame
      the screen shows (usually 60 a second) with requestAnimationFrame.
    - The hearing: the Web Audio API. The song is decoded (decodeAudioData),
      mixed to mono and split into three bands (low, middle, high) by simple
      filters. Each band's loudness is followed about 93 times a second, and
      an onset is marked wherever a band jumps above its own recent average.
      The onsets become the moves: rows and columns slide on them. While it
      plays, an AnalyserNode gives the live loudness the machines answer.
    - The recording: each frame is copied onto a 1080 x 1080 canvas. Its
      picture (captureStream) and the song's sound go into a MediaRecorder,
      which writes an MP4 (H.264 + AAC) where the browser can, or a WebM.

  MODEL B-1 - the band (one HTML file, about 107 KB)
    - The sound: every voice is built live from oscillators (sine, square,
      sawtooth) and noise, shaped by filters and envelopes. The reverb is a
      ConvolverNode fed a room made of decaying noise, not a recording.
      Delay, chorus, drive and the "pump" are Web Audio nodes too.
    - The reading: a sheet is plain JSON. The band turns each lane's tokens
      into notes, chords and holds, and schedules them on the audio clock.
    - The render: WAV plays the song into an OfflineAudioContext, two
      seconds at a time, and writes a 48 kHz, 16-bit stereo WAV byte by
      byte. M4A presses the same render to AAC with WebCodecs' AudioEncoder,
      in an MP4 box made by mp4-muxer (MIT licence), included in the file.

  The songs (.band.json, 4 to 9 KB each)
    - Plain text. Open one in a text editor, change a note, load it again.

  THE LINE EDITOR (LAB, one HTML file, about 109 KB)
    - The page itself, not a canvas: each line is a row of cells. A clock
      on the audio timeline plays the lit steps, four to a beat.
    - 94 sounds, all synthesized: 57 of its own (plucked strings made with
      a Karplus-Strong buffer, bells, drums, weather) and 37 from the band.
      18 effects per line, chained in a fixed order.
    - A folio is JSON: tempo, meter, bars, and lines of {sound, deg (the
      note, 0-8 on a Hirajoshi scale in D), vol, pan, fx, cells}.

  Ink and Paper - plays a folio (LAB, one HTML file, about 102 KB)
    - The same board as its hearing twin. Instead of the ears, it has the
      chart and a scheduler: every lit cell sounds and moves one line of
      tiles at the same audio time.


HOW IT WAS MADE
---------------

These are small programs: each one is a single HTML file, written with Claude
over many sessions, one feature at a time. They draw every frame themselves,
live, from the music. No video model, no image model.

The page this kit came from explains the whole pipeline and has starter
prompts, so you can begin your own.

Made with Claude · by BeRogue · free to use and to learn from.
